<template>
  <!-- banner area start from here -->
    <section class="banner-wrap">
            <swiper :modules="modules" :autoplay="autoplay" :pagination="{ clickable: true }" :space-between="0" @swiper="onSwiper" @slideChange="onSlideChange">
                <template v-for="dt in lists" :key="dt.id">
                    <swiper-slide v-for="dt2 in dt.publicizMedia" :key="dt2._id">
                        <template v-if="dt2.suffix.indexOf('jpg')>-1 || dt2.suffix.indexOf('gif')>-1 || dt2.suffix.indexOf('jpeg')>-1 || dt2.suffix.indexOf('png')>-1">
                            <div class="swiper-itemBox" :style="'background-image: url('+dt2.url+')'"></div>
                        </template>
                        <template v-else>
                            <div class="swiper-itemBox videoBox">
                                <my-video-play v-if="dt2.url" :src='dt2.url' ref="player"/>
                            </div>
                        </template>
                    </swiper-slide>
                </template>
            </swiper>
    </section>
</template>

<script>
    import { onMounted,reactive,toRefs } from 'vue';
    import {useStore} from 'vuex'
    import { Navigation, Pagination, Scrollbar, A11y,Autoplay } from 'swiper';
    import myVideoPlay from "@/components/myVideoPlay.vue";
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/css';
    import 'swiper/css/pagination';
    
    export default{
        props:['lists'],
        components:{
            Swiper, 
            SwiperSlide,
            myVideoPlay
        },
        setup(){
            const store = useStore()
            const state = reactive({
                modules : [Navigation, Pagination, Scrollbar, A11y,Autoplay],
                bannerTypeId:'',
                autoplay:{
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
                }
            })
            onMounted(async () =>{

                // const res = await store.dispatch('merchant/get_menu_by_parant_code',{
                //     SettingCode: 'Yooo_Picture'
                // })
                   
            })
            const onSwiper = (swiper) => {
                
            };
            const onSlideChange = () => {
                
            };

            return{
                ...toRefs(state),
                onSwiper,
                onSlideChange
            }
        }
    }
    
</script>

<style lang="scss">
.banner-wrap{
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    padding: 0;
    .swiper{
        width: 100%;
        height: 100%;
    }
    .swiper-itemBox{
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        img{
            width: 100%;
            display: block;
        }
        &.videoBox{
            background: #000;
        }
    }
    .swiper-pagination{
        bottom: -40px;
    }
    .swiper-pagination-bullet{
        height: 10px;
        width: 10px;
        background-color: #dedddd;
        opacity: 1;
        position: relative;
        z-index: 10;
        margin: 0 10px !important;
        &::after{
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 1px solid #ffaf29;
            transform: scale(0);
        }
        &.swiper-pagination-bullet-active{
            background-color: #ffaf29;
            &::after{
                transform: scale(2);
                transition: .3s ease;
            }
        }
    }
}

</style>